<template>
  <div>
    <div class="box">
      <a-row type="flex" class="box1-t">
        <a-col :span="3">发布商品</a-col>
      </a-row>
    </div>
    <a-row class="box2">
      <a-col :span="8">
        游戏名称
      </a-col>
      <a-col :span="16">商品类型</a-col>
    </a-row>
    <a-row class="box3">
      <a-col :span="8">
        <div
          v-for="(item,index) in arrL"
          :key="index"
          :class="index == alidx?'selects':''"
          @click="alTag(item,index)"
        >{{item.name}}</div>
      </a-col>
      <a-col :span="16">
        <div
          v-for="(item,index) in arrR"
          :key="index"
          :class="index == aridx?'selects':''"
          @click="arTag(index)"
        >{{item.name}}</div>
      </a-col>
    </a-row>
    <div class="box-b">
      <a-button type="primary" @click="close">下一步</a-button>
    </div>
  </div>
</template>

<script>
import { GAT_LIST, GAT_CATE } from "./server";
export default {
  data() {
    return {
      arrL: [],
      arrR: [],
      search: "",
      alidx: 0,
      aridx: 0
    };
  },
  created() {
    GAT_LIST().then(res => {
      if (!res) return;
      this.arrL = [...res.data.list];
      this.getCate(this.arrL[0].list_id);
    });
  },
  methods: {
    alTag(v, i) {
      this.alidx = i;
      this.getCate(v.list_id);
    },
    arTag(i) {
      this.aridx = i;
    },
    getCate(id) {
      GAT_CATE({ list_id: id, lv: 1 }).then(res => {
        if (res) {
          this.aridx = 0;
          this.arrR = res.data;
        } else {
          this.arrR = [];
        }
      });
    },
    close() {
      if (this.arrL.length <= 0) {
        this.$message.error("请选择游戏");
        return;
      }
      if (this.arrR.length <= 0) {
        this.$message.error("请选择商品类型");
        return;
      }
      let v = {
        type: "shop",
        list_id: this.arrL[this.alidx].list_id,
        list_name: this.arrL[this.alidx].name,
        cate_id: this.arrR[this.aridx].cate_id,
        cate_name: this.arrR[this.aridx].name
      };
      this.$emit("close", v);
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  border: 1px solid #e8e8e8;

  .box1-t {
    height: 42px;
    line-height: 42px;
    background: #f6f6f6;
    div:first-child {
      padding-left: 24px;
    }
    &/deep/.ant-select-selection {
      border-color: #e8e8e8;
      background: #f6f6f6;
    }
  }
}
.box2 {
  height: 46px;
  line-height: 46px;
  background: #f6f6f6;
  border: 1px solid #e8e8e8;
  border-top: 0;
  & > div:first-child {
    padding: 0 12px;
    border-right: 1px solid #e8e8e8;
    box-sizing: border-box;
    &/deep/.ant-input-group-wrapper {
      margin-top: 6px;
    }
  }
  & > div:last-child {
    padding: 0 12px;
  }
}
.box3 {
  height: 466px;
  border: 1px solid #e8e8e8;
  border-top: 0;
  & > div:first-child {
    border-right: 1px solid #e8e8e8;
  }
  & > div {
    height: 100%;
    overflow-y: auto;
    div {
      height: 36px;
      line-height: 36px;
      padding-left: 12px;
      cursor: pointer;
      &:hover {
        background: #0084ff;
        color: #fff;
      }
    }
    .selects {
      background: #0084ff;
      color: #fff;
    }
  }
}
.box-b {
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #e8e8e8;
  button {
    width: 170px;
  }
}
</style>